<template>
  <div id='appointPeriod'>
    <div class='contenter'>
      <el-form :model='ruleForm'
               ref='ruleForm'
               label-width='110px'
               class='ruleForm'>
        <div :val='valText'>
          <div style='height: 40px;'>
            <div class='pull_left'>
              <el-radio v-model='type_year'
                        label='1'
                        >每年</el-radio>
            </div>
            <div class='pull_right'
                 style='margin-right: 118px;'>
              <div class='pull_left'>
                <el-radio v-model='type_year'
                          label='2'
                          size='mini'
                          border>指定</el-radio>
              </div>
              <div class='pull_left pull-left-year'>
                <span style='margin-left: 10px; margin-right: 5px;'>从</span>
                <el-input-number @change='startYear'
                                 v-model='year.start'
                                 :min='2018'
                                 :max='3000'
                                 size='small'></el-input-number>
                <span style='margin-left: 5px; margin-right: 5px;'>至</span>
                <el-input-number @change="type_year = '2'"
                                 v-model='year.end'
                                 :min='2019'
                                 :max='3000'
                                 size='small'></el-input-number>
                年
              </div>
            </div>
          </div>
          <div style='height: 64px;'>
            <div class='pull_left'>
              <el-radio v-model='type_month'
                        label='3'
                        size='mini'>每月</el-radio>
            </div>
            <div class='pull_right'
                 style='margin-right: 63px;'>
              <div class='pull_left'>
                <el-radio v-model='type_month'
                          label='4'
                          size='mini'
                          border>指定</el-radio>
              </div>
              <div class='pull_left'>
                <el-checkbox-group v-model='monthAppoint'>
                  <div v-for='i in 2'
                       :key='i'
                       style='margin-left: 10px;  line-height: 25px;'>
                    <el-checkbox @change="type_month = '4'"
                                 v-for='j in 10'
                                 v-if="parseInt((i - 1) + '' + (j - 1)) < 13 && !(i == 1 && j == 1)"
                                 :key='j'
                                 :label="(i - 1) + '' + (j - 1)"></el-checkbox>
                  </div>
                </el-checkbox-group>
              </div>
            </div>
          </div>
          <div style='height: 122px;'>
            <div class='pull_left'>
              <el-radio v-model='type_date'
                        label='11'
                        size='mini'>每日</el-radio>
            </div>
            <div class='pull_right'
                 style='margin-right: 20px;'>
              <div class='pull_left'>
                <el-radio v-model='type_date'
                          label='12'
                          size='mini'
                          border>指定</el-radio>
              </div>
              <div class='pull_left'>
                <el-checkbox-group v-model='dateAppoint'>
                  <div v-for='i in 4'
                       :key='i'
                       style='margin-left: 10px;  line-height: 25px;'>
                    <el-checkbox @change="type_date = '12'"
                                 v-for='j in 10'
                                 v-if="parseInt((i - 1) + '' + (j - 1)) < 32 && !(i == 1 && j == 1)"
                                 :key='j'
                                 :label="(i - 1) + '' + (j - 1)"></el-checkbox>
                  </div>
                </el-checkbox-group>
              </div>
            </div>
          </div>
          <div style='height: 95px;'>
            <div class='pull_left pull-left-head'>
              <el-radio v-model='type_hour'
                        label='5'
                        size='mini'>每</el-radio>
              <el-input-number @change="type_hour = '5'"
                               v-model='hour'
                               :min='1'
                               :max='23'
                               size='small'></el-input-number>
              小时
            </div>
            <div class='pull_right'
                 style='margin-right: 20px;'>
              <div class='pull_left'>
                <el-radio v-model='type_hour'
                          label='6'
                          size='mini'
                          border>指定</el-radio>
              </div>
              <div class='pull_left'>
                <el-checkbox-group v-model='hourAppoint'>
                  <div v-for='i in 3'
                       :key='i'
                       style='margin-left: 10px;  line-height: 25px;'>
                    <el-checkbox @change="type_hour = '6'"
                                 v-for='j in 10'
                                 v-if="parseInt((i - 1) + '' + (j - 1)) < 24 && !(i == 1 && j == 1)"
                                 :key='j'
                                 :label="(i - 1) + '' + (j - 1)"></el-checkbox>
                  </div>
                </el-checkbox-group>
              </div>
            </div>
          </div>
          <div style='height: 188px;'>
            <div class='pull_left pull-left-head'>
              <el-radio v-model='type_minute'
                        label='7'
                        size='mini'>每</el-radio>
              <el-input-number @change="type_minute = '7'"
                               v-model='minute'
                               :min='1'
                               :max='59'
                               size='small'></el-input-number>
              分钟
            </div>
            <div class='pull_right'
                 style='margin-right: 20px;'>
              <div class='pull_left'>
                <el-radio v-model='type_minute'
                          label='8'
                          size='mini'
                          border>指定</el-radio>
              </div>
              <div class='pull_left'>
                <el-checkbox-group v-model='minuteAppoint'>
                  <div v-for='i in 6'
                       :key='i'
                       style='margin-left: 10px;  line-height: 25px;'>
                    <el-checkbox @change="type_minute = '8'"
                                 v-for='j in 10'
                                 v-if="parseInt((i - 1) + '' + (j - 1)) < 60 && !(i == 1 && j == 1)"
                                 :key='j'
                                 :label="(i - 1) + '' + (j - 1)"></el-checkbox>
                  </div>
                </el-checkbox-group>
              </div>
            </div>
          </div>
          <div style='height: 188px;'>
            <div class='pull_left pull-left-head'>
              <el-radio v-model='type_second'
                        label='9'
                        size='mini'>每</el-radio>
              <el-input-number @change="type_second = '9'"
                               v-model='second'
                               :min='1'
                               :max='59'
                               size='small'></el-input-number>
              秒
            </div>
            <div class='pull_right'
                 style='margin-right: 20px;'>
              <div class='pull_left'>
                <el-radio v-model='type_second'
                          label='10'
                          size='mini'
                          border>指定</el-radio>
              </div>
              <div class='pull_left'>
                <el-checkbox-group v-model='secondAppoint'>
                  <div v-for='i in 6'
                       :key='i'
                       style='margin-left: 10px;  line-height: 25px;'>
                    <el-checkbox @change="type_second = '10'"
                                 v-for='j in 10'
                                 v-if='parseInt((i - 1) + "" + (j - 1)) < 60 && !(i == 1 && j == 1)'
                                 :key='j'
                                 :label="(i - 1) + '' + (j - 1)"></el-checkbox>
                  </div>
                </el-checkbox-group>
              </div>
            </div>
          </div>
          <el-form-item label='Cron表达式'
                        prop='cronExpression'
                        class='cronExpression'
                        style="margin-right: 20px;">
            <el-input v-model='ruleForm.cronExpression'
                      disabled></el-input>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
    name: 'appointPeriod',
    data () {
        return {
            endYear: 2018,
            type_second: '0', // 类型
            type_minute: '0', // 类型
            type_hour: '0', // 类型
            type_date: '0', // 类型
            type_month: '0', // 类型
            type_year: '0', // 类型
            year: {
                start: 0,
                end: 0
            },
            ruleForm: {
                cronExpression: ''
            },
            monthAppoint: [], // 月指定
            hourAppoint: [], // 时指定
            minuteAppoint: [], // 分指定
            secondAppoint: [], // 秒指定
            dateAppoint: [], // 天指定
            year_: '', // 指定年
            month: '1', // 每月
            date: '1', // 每日
            hour: '', // 时
            minute: '', // 分
            second: '' // 秒
        };
    },
    methods: {
        startYear () {
            this.year.end = this.year.start + 1;
        }
    },
    computed: {
        valText () {
            let result = [];
            let year = '*'; // 指定年
            let month = '*'; // 每月
            let date = '*'; // 每日
            let hour = '*'; // 时
            let minute = '*'; // 分
            let second = '*'; // 秒
            let that = this;
            switch (this.type_year) {
            case '1': // 每年
                that.year.start = 2018;
                that.year.end = 2019;
                year = '*';
                that.year_ = '';
                month = '01';
                date = '01';
                hour = 0;
                break;
            case '2': // 指定年
                that.year_ = that.year.start + '-' + that.year.end;
                month = '01';
                date = '01';
                break;
            }
            switch (this.type_month) {
            case '3': // 每月
                that.monthAppoint = []; // 月指定
                month = '*'; // 指定年
                date = '01';
                hour = 0;
                break;
            case '4': // 指定月
                //  year = '*' // 指定年
                date = '01';
                break;
            }
            switch (this.type_date) {
            case '11': // 每日
                that.dateAppoint = []; // 天指定
                date = '*';
                hour = 0;
                break;
            case '12': // 指定日
                break;
            }
            switch (this.type_hour) {
            case '5': // 每时
                that.hourAppoint = []; // 时指定
                hour = '0/' + this.hour;
                break;
            case '6': // 指定时
                break;
            }
            switch (this.type_minute) {
            case '7': // 每分
                that.minuteAppoint = []; // 分指定
                minute = '0/' + that.minute;
                break;
            case '8': // 指定分
                break;
            }
            switch (this.type_second) {
            case '9': // 每秒
                that.secondAppoint = []; // 秒指定
                second = '0/' + that.second;
                break;
            case '10': // 指定秒
                break;
            }
            if (minute === '*' && hour !== '*') {
                minute = 0;
            }
            if (second === '*' && minute !== '*') {
                second = 0;
            }
            that.ruleForm.cronExpression = `${
                that.secondAppoint.length === 0 ? second : that.secondAppoint.join(',')
            } ${
                that.minuteAppoint.length === 0 ? minute : that.minuteAppoint.join(',')
            } ${that.hourAppoint.length === 0 ? hour : that.hourAppoint.join(',')} ${
                that.dateAppoint.length === 0 ? date : that.dateAppoint.join(',')
            } ${
                that.monthAppoint.length === 0 ? month : that.monthAppoint.join(',')
            } ? ${that.year_ === '' ? year : that.year_}`;

            if (that.ruleForm.cronExpression.trim() === '?' || that.ruleForm.cronExpression === '* * * * * ? *') {
                return;
            }
            if (!that.ruleForm.cronExpression) {
                return;
            }
            let srt = that.ruleForm.cronExpression;
            let temp = 0;
            for (let i = srt.length - 1; i > 0; i--) {
                if (srt[i] !== '*' && srt[i] !== '?' && srt[i] !== 0) {
                    temp = i;
                    break;
                }
            }
            let str = srt.slice(0, temp);
            let str1 = srt.slice(temp, srt.length);
            if (str1 === '*') {
                that.ruleForm.cronExpression = str.replace(/\*/g, '0') + str1;
                that.$emit('cron', str.replace(/\*/g, '0') + str1);
            }
            that.ruleForm.cronExpression = str + str1;
            that.$emit('cron', str + str1);
            return result.join('');
        }
    }
};
</script>
<style lang="scss" scoped="scoped">
.ruleForm {
  margin-left: 20px;
}
.pull-left-year{
    margin-left: 11px;
}
/deep/ .pull_left .el-checkbox {
    margin-left: 10px;
    margin-right: 0;
    .el-checkbox__label {
        padding-left: 4px;
    }
}
/deep/ .pull-left-head .el-radio{
  margin-right: 2px;
}
</style>
